<template>
  <div class="income">
    <section class="income__bread-crumb">
      <BreadCrumb
        v-model:dateRange="dateRange"
        :show-date="true"
        @change="dateChange"
      />
    </section>
    <section class="base-page-container income__search">
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
      <BaseRadioGroupLabelItem
        v-model:select="channelSelect"
        label="渠道"
        :options="channelOptions"
        @change="channelChange"
      />
      <PanelLabelItem label="用户类别" :no-margin-bottom="true">
        <PanelLabelItem label="会员类型">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in memberTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
        <PanelLabelItem label="套餐时长">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in durationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>

        <PanelLabelItem label="团队人数">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in teamCountOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
        <PanelLabelItem label="付费行为">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in paymentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
      </PanelLabelItem>
    </section>
    <!-- 图表 -->
    <section class="base-page-container">
      <ul class="income__data">
        <li>
          <p>销售额</p>
          <p class="income__data__value">¥82.21</p>
        </li>
        <li>
          <p>订单数</p>
          <p class="income__data__value">3,424,894</p>
        </li>
        <li>
          <p>ARPU
            <el-tooltip
              class="box-item"
              effect="dark"
              content="每用户平均收入"
              placement="top"
            >
              <svg
                viewBox="0 0 1024 1024"
                width="12"
                height="12"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="#606266"
                  d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0
                768zm48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
                ></path>
              </svg>
            </el-tooltip>
          </p>
          <p class="income__data__value">3,424,894</p>
        </li>
        <li>
          <p>ARPPU
            <el-tooltip
              class="box-item"
              effect="dark"
              content="每付费用户平均收入"
              placement="top"
            >
              <svg
                viewBox="0 0 1024 1024"
                width="12"
                height="12"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="#606266"
                  d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0
                768zm48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
                ></path>
              </svg>
            </el-tooltip>
          </p>
          <p class="income__data__value">3,424,894</p>
        </li>
      </ul>
      <div class="income__sales">
        <span class="income__sales__label">最高销售额为<strong class="income__sales__value">2,923</strong></span>
        <span class="income__sales__label">最低销售额为<strong class="income__sales__value">61</strong></span>
        <el-radio-group v-model="flowTarget" class="base-fr" @change="flowTargetChange">
          <el-radio-button v-for="item in flowTargetOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="income__chart">
        <KLineChart
          width="100%"
          height="236px"
          x-type="date"
          y-type="number"
          :x-data="lineChartXData"
          :y-data="lineChartYData"
          :options="{ showSeriesName: true, seriesName: '销售额' }"
        />
      </div>
    </section>

  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import { KLineChart } from '@/components/k-charts';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { PanelLabelItem } from '@/components/base-panel';
import { deviceOptions, channelOptions, memberTypeOptions, durationOptions, teamCountOptions, paymentOptions, lineChartXData, lineChartYData } from './data.ts';
defineOptions({
  name: 'KgjPageSceneIncome'
});
const deviceSelect = ref(0);
const channelSelect = ref(0);
const channelChange = (val: string | number | boolean) => {
  console.log(val);
};
const targetSelect = ref(null);
const flowTarget = ref(1);
const flowTargetOptions:any[] = reactive([
  { label: '销售额', value: 1 },
  { label: '订单数', value: 2 },
  { label: 'ARPU', value: 3 },
  { label: 'ARPPU', value: 3 }
]);
const flowTargetChange = (value: string | number | boolean) => {
  console.log(value);
};
// 单选
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
//
const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
</script>
<style lang="scss" scoped>
.income {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__data {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    li {
      width: 25%;
      padding: 16px;
      margin-right: 16px;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      color: #A8ABB2;
    }

    &__value {
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #303133;
    }
  }

  &__sales {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: #909399;
    letter-spacing: -.01px;

    &__label {
      padding-right: 24px;
    }

    &__value {
      padding-left: 2px;
      font-weight: 500;
      color: #606266;
    }

    &__radio {
      padding-left: 4px;
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      color: #F56C6C;
      letter-spacing: -.01px;

      &::after {
        display: inline-block;
        margin: -10px 0 0 6px;
        font-size: 14px;
        vertical-align: middle;
        content: '';
        border-color: transparent transparent #F56C6C;
        border-style: solid;
        border-width: 6px 4px;
      }

      &--down {
        color: #67C23A;

        &::after {
          margin-top: 6px;
          border-color: #67C23A transparent transparent;
        }
      }
    }
  }

  &__chart {
    display: flex;
    align-items: center;
    height: 236px;
    margin-top: 16px;
  }
}
</style>
